import { normCity, normCityGetVal } from '@/components/BuildForm';
import ImBtn from '@/components/Im/ImBtn';
import { getActionSheetList } from '@/servers/api/base';
import { getCrossborderList } from '@/servers/api/collection';
import { customFormat, filterCity } from '@/utils';
import {
    FormattedMessage,
    history,
    useIntl,
    useLocation,
    useModel,
} from '@umijs/max';
import {
    Button,
    Cascader,
    Col,
    Form,
    Input,
    Row,
    Select,
    Space,
    Table,
    message,
} from 'antd';
import { useEffect, useState } from 'react';

export default function FreightForwarder() {
    let location = useLocation();
    const intl = useIntl();
    const { cityOptions } = useModel('global');
    const { createC2CConversation } = useModel('useTencentIm');
    const { initialState } = useModel('@@initialState');
    const [form] = Form.useForm();
    const [dataSource, setdataSource] = useState([]); //表格
    const Countryofdestination = [
        {
            label: '中国->俄罗斯',
            value: '0-1',
        },
        {
            label: '中国->中国',
            value: '0-0',
        },
        {
            label: '俄罗斯->中国',
            value: '1-0',
        },
        {
            label: '俄罗斯->俄罗斯',
            value: '1-1',
        },
    ]; //出发国目的国
    const [mode, setmode] = useState([]); //运输方式
    const classification = [
        //通关服务
        {
            value: 2,
            label: <FormattedMessage id="清关"></FormattedMessage>,
        },
        {
            value: 1,
            label: <FormattedMessage id="报关"></FormattedMessage>,
        },
        {
            value: 3,
            label: <FormattedMessage id="报关+清关"></FormattedMessage>,
        },
    ];
    const is_express_priceOptions = [
        {
            label: '是',
            value: 2,
        },
        {
            label: '否',
            value: 1,
        },
    ];
    /** 数据总条数 */
    const [count,setCount] = useState(0)
    /** loading */
    const [loading,setLoading] = useState(true)
    /** 详情 */
    function details(row) {
        history.push('/detail', {
            id: row.id,
            type: location?.state?.type,
            releaseType: 'crossborder',
        });
    }
    const columns = [
        {
            title: <FormattedMessage id="始发国家"></FormattedMessage>,
        // <>{record.user[intl.formatMessage({ id: 'item.username' })]}</>
            render: (text, record) => (
                <>
                    {record.reachcitys[
                        intl.formatMessage({ id: 'item.city.mergename' })
                    ]
                        ? record.reachcitys[
                              intl.formatMessage({ id: 'item.city.mergename' })
                          ].split(',')[0]
                        : ''}
                </>
            ),
        },
        {
            title: <FormattedMessage id="到达地国家"></FormattedMessage>,
            render: (text, record) => (
                <>
                    {' '}
                    {record.departurecitys[
                        intl.formatMessage({ id: 'item.city.mergename' })
                    ]
                        ? record.departurecitys[
                              intl.formatMessage({ id: 'item.city.mergename' })
                          ].split(',')[0]
                        : ''}
                </>
            ),
        },
        {
            title: <FormattedMessage id="整车/散货"></FormattedMessage>,
            render: (text, record) => (
                <> {customFormat(record.whole_diffuse, intl)}</>
            ),
        },
        {
            title: <FormattedMessage id="发布人"></FormattedMessage>,
            key: 'id',
            render: (text, record) => (
                <>{record.user[intl.formatMessage({ id: 'item.username' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="数量"></FormattedMessage>,
            key: 'goods_num',
            render: (text, record) => (
                <>
                    {record[intl.formatMessage({ id: 'item.goods_num' })]}
                    {record[intl.formatMessage({ id: 'item.number_unit' })]}
                </>
            ),
        },
        {
            title: <FormattedMessage id="期望单价"></FormattedMessage>,
            key: 'price_unit',
            render: (text, record) => (
                <>
                    {record['desire_price']}
                    <FormattedMessage id={record.price_unit}></FormattedMessage>
                    &nbsp;/&nbsp;
                    {record[intl.formatMessage({ id: 'item.number_unit' })]}
                </>
            ),
        },
        {
            title: <FormattedMessage id="期望速度"></FormattedMessage>,
            dataIndex: 'desire_speed',
            key: 'desire_speed',
        },
        {
            title: <FormattedMessage id="操作"></FormattedMessage>,
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <Button
                        type="primary"
                        ghost
                        size="small"
                        onClick={() => {
                            details(record);
                        }}
                    >
                        <FormattedMessage id="查看详情"></FormattedMessage>
                    </Button>
                    <ImBtn toMobile={record.user.mobile}></ImBtn>
                </Space>
            ),
        },
    ];
    const [tableparams, settableparams] = useState({
        page: 1,
        size: 20,
        limit:20,
        clearance: '', //通关服务
        searchKey: '', //搜索框
        company_city: '', //公司所在地
        type: 1, // 1发布 2 竞拍
        departure_country: '', //出发国家
        reach_country: '', //到达国家
        port_city: '', //通关口岸
        mode: '', //运输方式 火车啥的
        departure_city: '', //出发城市
        reach_city: '', //到达城市
        is_express_price: '', //是否含运费
    });
    function goodsList(params: any) {
        setLoading(true)
        const qParams = {
            ...params,
        };
        delete qParams.departure_city;
        if (params.departure_city && params.departure_city.length > 0) {
            qParams.departure_city =
                params.departure_city[params.departure_city.length - 1];
        }
        if (qParams.departure_country) {
            qParams.departure_country = params.departure_country.split('-')[0];
            qParams.reach_country = params.departure_country.split('-')[1];
        }
        if (qParams.port_city && qParams.port_city.length > 0) {
            qParams.port_city =
                params.port_city[params.port_city.length - 1].label;
        }
        if (qParams.company_city && qParams.company_city.length > 0) {
            qParams.company_city =
                params.company_city[params.company_city.length - 1].label;
        }
        getCrossborderList({ ...qParams }).then((res) => {
            /** 赋值页面总条数 */
            setCount(res.count)
            /** 赋值loading状态 */
            setLoading(false)
            settableparams(params);
            /** 页面数据赋值 */
            setdataSource(res.data);

        });
    }
    /** 分页 */
    const handleTableChange = (pagination:any) => {
        settableparams(prevParams => ({
            ...prevParams,
            page: pagination.current,  /** 更改页数 */
        }));
    };
    useEffect(() => {
        (async () => {
            //运输方式
            const mode = await getActionSheetList({
                type: 'mode',
            });
            setmode(mode.data);
            goodsList({ ...tableparams, type: location?.state?.type });
        })();
    }, [tableparams.page]);
    return (
        <>
            <Form
                colon={false}
                form={form}
                onFinish={(params) =>
                    goodsList({
                        ...tableparams,
                        ...params,
                        page: 1,
                        size: 20,
                    })
                }
                autoComplete="off"
            >
                <Row gutter={15}>
                    <Col span={6}>
                        <Form.Item
                            label={
                                <FormattedMessage id="搜索"></FormattedMessage>
                            }
                            name="searchKey"
                        >
                            <Input
                                placeholder={intl.formatMessage({
                                    id: '根据关键字进行搜索',
                                })}
                            ></Input>
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            label={
                                <FormattedMessage id="通关服务"></FormattedMessage>
                            }
                            name="clearance"
                        >
                            <Select
                                options={classification}
                                allowClear
                                placeholder={intl.formatMessage({
                                    id: '通关服务',
                                })}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            label={
                                <FormattedMessage id="通关口岸"></FormattedMessage>
                            }
                            name="port_city"
                            getValueFromEvent={normCity}
                            getValueProps={normCityGetVal}
                        >
                            <Cascader
                                allowClear
                                options={cityOptions}
                                showSearch={{ filterCity }}
                                placeholder={
                                    <FormattedMessage id="请选择通关口岸"></FormattedMessage>
                                }
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            label={
                                <FormattedMessage id="运输方式"></FormattedMessage>
                            }
                            name="mode"
                        >
                            <Select
                                allowClear
                                options={mode}
                                placeholder={
                                    <FormattedMessage id="请选择运输方式 >"></FormattedMessage>
                                }
                                fieldNames={{
                                    label: 'text',
                                    value: 'id',
                                }}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            label={
                                <FormattedMessage id="公司所在地"></FormattedMessage>
                            }
                            name="company_city"
                            getValueFromEvent={normCity}
                            getValueProps={normCityGetVal}
                        >
                            <Cascader
                                allowClear
                                options={cityOptions}
                                showSearch={{ filterCity }}
                                placeholder={
                                    <FormattedMessage id="公司所在地"></FormattedMessage>
                                }
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            label={
                                <FormattedMessage id="含运费"></FormattedMessage>
                            }
                            name="is_express_price"
                        >
                            <Select
                                allowClear
                                options={is_express_priceOptions}
                                placeholder={
                                    <FormattedMessage id="是否含运费"></FormattedMessage>
                                }
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            label={
                                <FormattedMessage id="出发国目的国"></FormattedMessage>
                            }
                            name="departure_country"
                        >
                            <Select
                                allowClear
                                options={Countryofdestination}
                                placeholder={
                                    <FormattedMessage id="出发国目的国"></FormattedMessage>
                                }
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item>
                            <Space>
                                <Button htmlType="submit" type="primary">
                                    <FormattedMessage id="搜索"></FormattedMessage>
                                </Button>
                                <Button
                                    htmlType="reset"
                                    onClick={() => {
                                        goodsList({
                                            page: 1,
                                            size: 10,
                                        });
                                    }}
                                >
                                    <FormattedMessage id="重置"></FormattedMessage>
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Table
                loading={loading}
                dataSource={dataSource}
                rowKey="id"
                columns={columns}
                pagination={{
                    pageSize: 20,  // 每页条数
                    total: count,  // 总条数
                    showSizeChanger: false,
                    onChange: (page, pageSize) => handleTableChange({ current: page, pageSize }),
                }}
            />
        </>
    );
}
